<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>酒店辅助管理系统</title>

    <link  th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link  th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/css/regist.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/ry-ui.css}" rel="stylesheet"/>



    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
    <script>
        if(window.top!==window.self){window.top.location=window.location};
    </script>
</head>

<body class="signin" >
<div class="signinpanel">
    <div class="row">
        <div class="col-sm-7">
            <div class="signin-info">
                <div class="logopanel m-b">
                    <h1><img alt="[ NumberOne ]" th:src="@{/images/numberone.png}"></h1>
                </div>
                <div class="m-b"></div>
                <h4>欢迎使用 <strong>酒店辅助管理系统</strong></h4>

                <strong>还没有账号？ <a href="#">立即注册&raquo;</a></strong>
            </div>
        </div>
        <div class="col-sm-5">
            <form class=" layui-form-pane" id="signupForm" name="signupForm" method="post">
                <h4 class="no-margins">注册：</h4><a ></a>

                <input type="text"  required  minlength="3" maxlength="10" name="userName" class="form-control " id="userName"     placeholder="用户名"     />
                <input type="text"  name="userNumber" class="form-control "   id="userNumber"  placeholder="手机号"   />
                <input type="email" required  name="userEmail" class="form-control "   id="userEmail"  placeholder="邮箱"   />
                <input type="password"  required  minlength="6"maxlength="12" name="userPassword" class="form-control " id="userPassword"    placeholder="密码"     />
                <input type="text" required  minlength="6" maxlength="6" class="form-control" id="checkCode" placeholder="邮箱验证码"/>
                <div class="row m-t" >
                </div>
                <div class="layui-form-item">

                    <div class="layui-input-block">
                        <button id="sendCheckCode" type="button" class="btn btn-success btn-block">获取验证码</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
<!--&#45;&#45;             <button class="btn btn-success btn-block" id="btnSubmit" data-loading="请稍后...">注册</button>-->
                        <button  lay-filter="regist"  class=" btn btn-success btn-block" id="btnSubmit" data-loading="请稍后..." >注册</button>
                    </div>
                    <a th:href="@{/toUserLogin}" class="">我已有帐号,去登录....</a>
                </div>
            </form>
        </div>
    </div>
    <div class="signup-footer">

    </div>
</div>

<!-- 全局js -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/bower_components/select2/dist/js/select2.full.min.js}"></script>


<script th:src="@{/js/jquery.js}"></script>
<script th:src="@{/js/jquery.validate.min.js}"></script>
<script th:src="@{/js/messages_zh.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/lay/modules/layer.js}"></script>
<link rel="stylesheet" th:href="@{/layui/css/modules/layer/default/layer.css}">

<!--<script  th:src="@{/js/bootstrap.min.js}"></script>-->
<script>

    $().ready(function() {
        $.validator.setDefaults({
            submitHandler:function () {
                $('#signupForm').submit();
            }
        })

        jQuery.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写手机号码");



// 在键盘按下并释放及提交后验证提交表单
        $("#signupForm").validate({
            rules: {

                userPassword: {
                    required: true,
                    minlength: 5
                },

                userEmail: {
                    required: true,
                    email:true

                },
                userNumber:{
                    required:true,
                    minlength:11,
                    maxlength:11,
                    isMobile : true
                }

            },
            messages: {

                userPassword: {
                    required: "请输入密码",
                    minlength: "密码长度不能小于 5 个字母"
                },

                userEmail: {
                    required:"请输入正确的邮箱",
                },
                userNumber:{
                    required:"请输入正确的手机号码",
                     minlength:"请输入11位手机号",
                    isMobile:"请输入正确的手机号"
                }

            }
        });
    });
    layui.use("form",function () {
        var form = layui.form;
        var $ = layui.$;

        form.on("submit(regist)", function (data) {
            var inputCheckCode = $("#checkCode").val();
            if (inputCheckCode == checkCode) {
                $.ajax({
                    url: "/user/userRegist",
                    type: "POST",
                    data: data.field,
                    async: false,
                    success: function (text) {
                        if ("ok" == text) {
                            layer.alert("注册成功", function () {
                                window.location.href = "/toUserLogin";
                            });
                        } else if ("error" == text) {
                            layer.alert("注册失败", function () {
                                window.location.href = "/toRegist";
                            });
                        }
                    }
                });
            } else {
                layer.alert("验证码输入错误");
            }
            return false;
        });

        //验证码
        var checkCode = "";

        $("#sendCheckCode").click(function () {
            var email = $("#userEmail").val();
            if (email == null || email == "") {
                layer.msg("请输入邮箱！！！");
                return;
            }
            var index = layer.open({
                type: 3,
                content: "邮件发送中..."
            });

            $.ajax({
                url: "/user/getCheckCode?email=" + email,
                type: "get",
                success: function (text) {
                    if (text != null && text != "") {
                        layer.close(index);
                        layer.msg("已发送");
                        checkCode = text;
                        countDown();
                    } else {
                        layer.alert("获取失败，请重新获取")
                    }
                }
            });
        });

        var maxTime = 60;

        function countDown() {
            if (maxTime == 0) {
                checkCode = "";
                $("#sendCheckCode").removeClass("layui-btn-disabled");
                $("#sendCheckCode").removeAttr("disabled")
                $("#sendCheckCode").html("获取验证码");
                maxTime = 10;
            } else {
                $("#sendCheckCode").attr("disabled", "disabled");
                $("#sendCheckCode").addClass("layui-btn-disabled");
                form.render();
                $("#sendCheckCode").html(maxTime + "秒后重新获取");
                maxTime--;
                setTimeout(countDown, 1000);
            }
        }

        });




</script>
</body>
</html>
